<template>
  <div class="songer">
    <div class="songer-top">
      <div>地区:</div>
      <div>标签:</div>
    </div>
    <div class="songer-bottom">
      <div class="songer-item">
        <img :src="require('@/assets/cover4.jpg')" alt="" />
        <div class="item-right">
          <div ><img style="height:12px;width:24px" :src="require('@/assets/皇冠.png')" alt="" /></div>
          <div class="item2">Beyong</div>
          <div>歌曲：120</div>
          <div>喜欢：110</div>
        </div>
      </div>
      <div class="songer-item">
        <img :src="require('@/assets/cover4.jpg')" alt="" />
        <div class="item-right">
          <div ><img style="height:12px;width:24px" :src="require('@/assets/皇冠.png')" alt="" /></div>
          <div class="item2">Beyong</div>
          <div>歌曲：120</div>
          <div>喜欢：110</div>
        </div>
      </div>
      <div class="songer-item">
        <img :src="require('@/assets/cover4.jpg')" alt="" />
        <div class="item-right">
          <div ><img style="height:12px;width:24px" :src="require('@/assets/皇冠.png')" alt="" /></div>
          <div class="item2">Beyong</div>
          <div>歌曲：120</div>
          <div>喜欢：110</div>
        </div>
      </div>
      <div class="songer-item">
        <img :src="require('@/assets/cover4.jpg')" alt="" />
        <div class="item-right">
          <div ><img style="height:12px;width:24px" :src="require('@/assets/皇冠.png')" alt="" /></div>
          <div class="item2">Beyong</div>
          <div>歌曲：120</div>
          <div>喜欢：110</div>
        </div>
      </div>
      <div class="songer-item">
        <img :src="require('@/assets/cover4.jpg')" alt="" />
        <div class="item-right">
          <div ><img style="height:12px;width:24px" :src="require('@/assets/皇冠.png')" alt="" /></div>
          <div class="item2">Beyong</div>
          <div>歌曲：120</div>
          <div>喜欢：110</div>
        </div>
      </div>
      <div class="songer-item">
        <img :src="require('@/assets/cover4.jpg')" alt="" />
        <div class="item-right">
          <div ><img style="height:12px;width:24px" :src="require('@/assets/皇冠.png')" alt="" /></div>
          <div class="item2">Beyong</div>
          <div>歌曲：120</div>
          <div>喜欢：110</div>
        </div>
      </div>
      <div class="songer-item">
        <img :src="require('@/assets/cover4.jpg')" alt="" />
        <div class="item-right">
          <div ><img style="height:12px;width:24px" :src="require('@/assets/皇冠.png')" alt="" /></div>
          <div class="item2">Beyong</div>
          <div>歌曲：120</div>
          <div>喜欢：110</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  setup() {},
};
</script>
<style scoped>
.songer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height:100vh;
    width:100vw;
}
.songer-top {
    height: 100px;
    text-align: left;
    padding: 20px;
}
.songer-bottom {
    flex: 1;
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
}
.songer-item{
    display: flex;
    width:200px;
    height: 90px;
}
.songer-item img{
    width:80px;
}
.item-right {
    display: flex;
    flex-direction: column;
    padding-left: 12px;
}
.item2{
    margin-bottom: 4px;
}
</style>
